 <template>
  <div>
    <tTable :columns="columns" :data="tableData">
      <!-- 账号类型 -->
      <template v-slot:identity="slotProps">
        <el-tag
          :type="slotProps.scope.row.identity | identityFilter"
        >{{slotProps.scope.row.identity | identityNameFilter}}</el-tag>
      </template>
      <!-- 账号类型 -->
      <template v-slot:status="slotProps">
        <el-tag
          :type="slotProps.scope.row.status | statusFilter"
        >{{slotProps.scope.row.status | statusNameFilter}}</el-tag>
      </template>
      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button
          v-if="slotProps.scope.row.status === 'PENDING'"
          @click="$emit('reject', slotProps.scope.row.id)"
          type="danger"
          size="small"
        >拒绝</el-button>
        <el-button
          v-if="slotProps.scope.row.status === 'PENDING'"
          @click="$emit('accept', slotProps.scope.row.id)"
          type="primary"
          class="add-style"
          size="small"
        >接受</el-button>
        <el-button
          v-if="slotProps.scope.row.status === 'PASS'"
          @click="$emit('down', slotProps.scope.row.id)"
          type="primary"
          class="add-style"
          size="small"
        >完成</el-button>
      </template>
    </tTable>
  </div>
</template>

<script>
import tTable from "src/components/table/index.vue";

export default {
  filters: {
    identityFilter(status) {
      const statusMap = {
        AGENT: "success", // 代理商
        PARENT: "danger", // 亲自督导
        JOIN: "danger" // 加盟校区
      };
      return statusMap[status];
    },
    identityNameFilter(status) {
      const statusMap = {
        AGENT: "代理商", // 代理商
        PARENT: "亲子督导", // 亲子督导
        JOIN: "加盟校区" // 加盟校区
      };
      return statusMap[status];
    },
    statusFilter(status) {
      const statusMap = {
        PENDING: "waiting", // 待审核
        PASS: "success", // 通过
        REJECT: "dander", // 驳回
        CONTRACT: "info", // 合同
        DONE: "", // 完成
      };
      return statusMap[status];
    },
    statusNameFilter(status) {
      const statusMap = {
        PENDING: "待审核", // 待审核
        PASS: "通过", // 通过
        REJECT: "驳回", // 驳回
        CONTRACT: "合同", // 合同
        DONE: "完成", // 完成
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      checkIndex: 0,
      searchData: "",
      dialogVisible: false,

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "nick", label: "昵称" }
        },
        {
          attr: { prop: "phone", label: "联系方式", width: "120" }
        },
        {
          attr: { prop: "name", label: "用户名称" }
        },
        {
          slot: "identity",
          attr: { prop: "identity", label: "代理商身份", width: "100" }
        },
        {
          slot: "status",
          attr: { prop: "status", label: "申请状态", width: "80" }
        },
        {
          attr: { prop: "address", label: "地址" }
        },
        {
          attr: { prop: "remark", label: "备注" }
        },
        {
          attr: { prop: "createTime", label: "创建时间", width: "100" }
        },
        {
          attr: { prop: "updateTime", label: "修改时间", width: "110" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "160" }
        }
      ]
    };
  },
  components: { tTable },
  props: [
    "tableData",
    "isRecall",
    "pageSize",
    "total",
    "handleChange",
    "isReject",
    "isAccept",
    "reject",
    "accept",
    "isDown",
    "down"
  ],
  methods: {}
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.longTerm-style {
  color: #888;
  padding: 10px;
}

.input-width {
  width: 400px;
}

.upload-width {
  width: 400px;
}
.cascader-style {
  width: 300px;
  margin-bottom: 20px;
}

.widthBtn {
  width: 200px;
  margin: 20px 200px 0 0;
}
</style>
